import React from 'react';
import { Card, Table, Tag, Button } from 'antd';
import { EyeOutlined } from '@ant-design/icons';

const Orders: React.FC = () => {
  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNumber',
      key: 'orderNumber',
    },
    {
      title: '客户',
      dataIndex: 'customer',
      key: 'customer',
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount: number) => `¥${amount}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap: Record<string, { color: string; text: string }> = {
          pending: { color: 'orange', text: '待处理' },
          processing: { color: 'blue', text: '处理中' },
          completed: { color: 'green', text: '已完成' },
          cancelled: { color: 'red', text: '已取消' },
        };
        const { color, text } = statusMap[status] || { color: 'default', text: status };
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Button type="link" icon={<EyeOutlined />}>
          查看
        </Button>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      orderNumber: 'ORD001',
      customer: '客户A',
      amount: 299.99,
      status: 'completed',
      createdAt: '2024-01-15 10:30',
    },
    {
      key: '2',
      orderNumber: 'ORD002',
      customer: '客户B',
      amount: 199.99,
      status: 'processing',
      createdAt: '2024-01-15 11:45',
    },
  ];

  return (
    <div>
      <Card title="订单管理">
        <Table columns={columns} dataSource={data} />
      </Card>
    </div>
  );
};

export default Orders;